<template>
    <div class="module">
        <div class="video-container">
            <div class="filter">
                <el-form ref="loginForm"
                         v-loading="loading"
                         element-loading-text="别催了,AMG加速中!"
                         element-loading-spinner="el-icon-loading"
                         element-loading-background="rgba(0, 0, 0, 0.5)"
                         :rules="rules"
                         :model="loginForm"
                         class="loginContainer">
                    <h3 class="loginTitle">企业员工管理系统</h3>
                    <!--用户名-->
                    <el-form-item prop="username">
                        <el-input type="text" prefix-icon="el-icon-user-solid" v-model="loginForm.username" placeholder="请输入用户名"></el-input>
                    </el-form-item>
                    <!--密码-->
                    <el-form-item prop="password">
                        <el-input type="password" prefix-icon="el-icon-lock" v-model="loginForm.password" placeholder="密码"></el-input>
                    </el-form-item>
                    <!--验证码-->
                    <el-form-item prop="code">
                        <el-input  type="text" auto-complete="false" v-model="loginForm.code" placeholder="点击图片更换验证码"
                                   size="medium" style="width:220px;margin-right:15px;"prefix-icon="el-icon-key" @keydown.enter.native="submitLogin"></el-input>
                        <img :src="captchaUrl" @click="updateCaptcha">
                    </el-form-item>
                    <el-checkbox v-model="checked" class="loginRemember">记住密码</el-checkbox>
                    <el-button round  style="width:100%;background-color: #ff513c" @click="submitLogin" class="submitBtn" >登录</el-button>

                </el-form>
            </div>
            <video autoplay loop muted class="fillWidth">
                <source src="../assets/work.mp4" type="video/mp4"/>
            </video>



        </div>
    </div>
</template>

<script>


    export default {
        name: "Login",
        data() {
            return {
                captchaUrl: '/captcha?time=' + new Date(),
                loginForm: {
                    username: 'admin',
                    password: '123',
                    code: ''
                },
                loading: false,
                checked: true,
                rules: {
                    username: [{required: true, message: '请输入用户名', trigger: 'blur'}
                    ],
                    password: [{required: true, message: '请输入密码', trigger: 'blur'}
                    ],
                    code: [{required: true, message: '请输入验证码', trigger: 'blur'}
                    ]
                }
            }
        },
        methods: {
            updateCaptcha() {
                this.captchaUrl = '/captcha?time=' + new Date();
            },
            submitLogin() {
                this.$refs.loginForm.validate((valid) => {
                    if (valid) {
                        const loading = this.$loading({
                            lock: true,
                            text: '别催了，AMG加速中！！！',
                            spinner: 'el-icon-loading',
                            background: 'rgba(255, 142, 136, 0.5)'
                        });
                        setTimeout(() => {
                            loading.close();
                        }, 2000);
                        this.postRequest('/login', this.loginForm).then(resp => {
                            if (resp) {
                                //存储用户token
                                const tokenStr = resp.obj.tokenHead + resp.obj.token;
                                window.sessionStorage.setItem('tokenStr', tokenStr);
                                let path = this.$route.query.redirect;
                                let a = (path==='/'||path===undefined)?'/home':path
                                this.$router.replace(a);
                            }
                        })

                    } else {
                        this.$message({
                            message: '请输入信息',
                            type: 'warning'
                        });
                        return false;
                    }
                });
            }
        }

    }
</script>

<style>

    .loginTitle {
        margin: 0px auto 40px auto;
        font-size: 40px;
        color: gold;
        letter-spacing: 0;
        text-shadow: 0px 1px 0px #999, 0px 2px 0px #888, 0px 3px 0px #777, 0px 4px 0px #666, 0px 5px 0px #555, 0px 6px 0px #444, 0px 7px 0px #333, 0px 8px 7px #001135;
        text-align: center;
    }

    .loginContainer {
        border-radius: 18px;
        background-clip: padding-box;
        margin: 180px auto;
        width: 380px;
        padding: 14px 35px 50px 35px;
        background: rgba(251, 226, 239, 0.4);
        border: 4px solid rgba(188, 255, 0, 0.21);

    }

    .loginRemember {
        text-align: left;
        margin: 0px 0px 15px 0px;
    }

    .el-form-item__content {
        display: flex;
        align-items: center;
    }


    .submitBtn {
        background-color: transparent;
        color: #ffac1d;
        width: 200px;
    }

    .module{

    }
    .video-container {
        position: relative;
        height: 100vh; /* IE GOOGLE适配 */
        overflow: hidden;
    }


    .video-container .filter {
        z-index: 1;
        position: absolute;
        background: rgba(0, 0, 0, 0);
        width: 100%;
    }

    .fillWidth {
        width: 100%;

    }

    


</style>